<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Activation</title>

    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.4.1/css/bootstrap.min.css" th:href="@{/webjars/bootstrap/css/bootstrap.min.css}" rel="stylesheet">
    <link href="https://cdn.90so.net/layui/2.4.5/css/layui.css" th:href="@{/webjars/layui/css/layui.css}" rel="stylesheet">
    <link href="../../static/css/register.css" th:href="@{/css/register.css}" rel="stylesheet" type="text/css">

    <script type="text/javascript" src="https://cdn.staticfile.org/jquery/3.4.0/jquery.min.js" th:src="@{/webjars/jquery/jquery.min.js}"></script>
    <script type="text/javascript" src="https://cdn.staticfile.org/twitter-bootstrap/3.4.1/js/bootstrap.min.js" th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script>
    <script type="text/javascript" src="https://cdn.90so.net/layui/2.4.5/layui.all.js" th:src="@{/webjars/layui/layui.all.js}"></script>
    <script type="text/javascript" src="https://cdn.staticfile.org/moment.js/2.24.0/moment.min.js" th:src="@{/webjars/momentjs/min/moment.min.js}"></script>
    <script type="text/javascript" src="https://cdn.staticfile.org/store.js/1.3.20/store.min.js" th:src="@{/webjars/store.js/store.min.js}"></script>
    <script type="text/javascript" src="../../static/js/common.js" th:src="@{/js/common.js}"></script>
    <script type="text/javascript" src="../../static/js/user.js" th:src="@{/js/user.js}"></script>
</head>

<body>
<div class="login" style="margin-top: 224px;">
    <div id="logo-div-id"></div>
    <div class="login-wrapper">
        <div class="login-box login-register">
            <div class="login-box-inner">
                <form id="activation-form" action="#" method="post">
                    <p>账户激活</p>
                    <div class="login-group">
                        <label for="activation-email">邮箱</label>
                        <input id="activation-email" type="text" name="receiverEmail" autocomplete="email" class="login-input">
                    </div>
                    <div class="login-group">
                        <label for="activation-code">激活码</label>
                        <input id="activation-code" type="text" name="verificationCode" autocomplete="current-password" class="login-input">
                    </div>
                    <button id="activation-email-btn" class="login-btn" style="width:30%; margin: 0 10%">
                        发送邮件
                    </button>
                    <button id="activation-btn" class="login-btn" style="width:30%; margin: 0 10px">
                        激活
                    </button>

                    <div class="text-foot">
                        账户已激活? <a href="" th:href="@{/v1/monitoring-system/users/page/login}" class="register-link">登录</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div id="footer-div-id"></div>
</div>

<script type="text/javascript">

    window.onload = function (ev) {

        // 页面初始化
        pageAfterOnloadInit();

        // 添加激活邮箱检测事件
        document.getElementById('activation-email').onblur = function (ev1) {
            checkEmailAndTip('activation-email');
        };

        // 添加激活码检测事件
        document.getElementById('activation-code').onblur = function (ev1) {
            checkActivationCodeAndTip('activation-code');
        };

        // 添加发送邮件按钮事件
        document.getElementById('activation-email-btn').onclick = function (ev1) {
            if (checkEmailAndTip('activation-email')) {
                sendEmail('activation-email', 'activation-email-btn');
            }
            return false;
        };

        // 添加激活按钮事件
        document.getElementById('activation-btn').onclick = activationFormSubmitEvent;
    }

</script>

<script type="text/javascript">

    //////////////// function defined ///////////////////////////////

    // 页面初始化
    function pageAfterOnloadInit() {
        // 公共 fragment 初始化
        initUserModelLogoDiv();
        initUserModelFooterDiv();

        // 表单数据填充
        var loginUser = getValueFromStoreAnyway(LOGIN_USER_KEY);
        if (!($.isEmptyObject(loginUser))) {
            // 填充登录用户的邮箱信息
            $("#activation-email").val(loginUser.email);
        }
    }

    // 激活按钮事件
    function activationFormSubmitEvent(ev) {
        if (checkEmailAndTip('activation-email') && checkActivationCodeAndTip('activation-code')) {

            // 发送激活请求
            $.ajax({
                url: USER_BASE_MAPPING_V1 + "/activation/verify",
                type: "post",
                async: false,
                data: {
                    activationEmail: $("#activation-email").val(),
                    activationCode: $("#activation-code").val()
                },
                success: function (result, status, xhr) {
                    var obj = JSON.parse(result);
                    var code = obj.code;
                    var message = obj.message;
                    var data = obj.data;
                    if (code !== 200) {
                        kingLayerMsg(message, userDefaultLayerMsgOptions);
                    } else {
                        kingLayerMsg(data, userDefaultLayerMsgOptions);

                        // 更新 store 中登录用户的激活信息
                        updateValueFieldInStore(LOGIN_USER_KEY, 'activation', true);

                        // 先等待信息提示结束，然后再跳转到主页面
                        setTimeout(function () {
                            window.location.href = USER_BASE_MAPPING_V1 + "/page/login";
                        }, SLEEP_TIME);
                    }
                }
            });
        }
        return false;
    }
</script>
</body>
</html>